<nav class="navbar navbar-default navbar-fixed-top" id="navbar-menu">
	<div class="brand" style="background: #2b333e;">
		<span style="cursor: pointer;"  @click="href"><img src="__STATIC__/assets/img/logo-dark.png" alt="Klorofil Logo" class="img-responsive logo"></span>
	</div>
	<div class="container-fluid" style="background: #2b333e;">
		
		<form class="navbar-form navbar-left">
			<div class="input-group">
				
			</div>
		</form>
		<div >
			<ul class="nav navbar-nav navbar-right">
				<!-- <li class="dropdown">
					<a href="#" class="dropdown-toggle icon-menu" data-toggle="dropdown">
						<i class="lnr lnr-alarm"></i>
						<span class="badge bg-danger">5</span>
					</a>
					<ul class="dropdown-menu notifications">
						<li><a href="#" class="notification-item"><span class="dot bg-warning"></span>System space is almost full</a></li>
						<li><a href="#" class="notification-item"><span class="dot bg-danger"></span>You have 9 unfinished tasks</a></li>
						<li><a href="#" class="notification-item"><span class="dot bg-success"></span>Monthly report is available</a></li>
						<li><a href="#" class="notification-item"><span class="dot bg-warning"></span>Weekly meeting in 1 hour</a></li>
						<li><a href="#" class="notification-item"><span class="dot bg-success"></span>Your request has been approved</a></li>
						<li><a href="#" class="more">See all notifications</a></li>
					</ul>
				</li> -->
				<li class="dropdown" style="width:80px;">
					<a href="#" style="background: #2b333e;color: #fff;" class="dropdown-toggle" data-toggle="dropdown">
						<!-- 消息通知 -->
						<el-badge :value="accountInfo.count"  class="item">
							<i  @click="dialogVisible=true" style="font-size: 20px;"  class="el-icon-bell"></i>
						</el-badge>
					</a>
				</li>
				
				<li class="dropdown" >
					<a href="#" style="background: #2b333e;color: #fff;" class="dropdown-toggle" data-toggle="dropdown"><img src="__STATIC__/assets/img/user.png" class="img-circle" alt="Avatar"> <span>{%$Think.session.name%}</span> <i class="icon-submenu lnr lnr-chevron-down"></i></a>
					<ul class="dropdown-menu" style="background: #2b333e;color: #fff;">
						<li></li>	
						<li>
							<a href="{%:url('account/setting')%}" target="frame_a"><i class="lnr lnr-user"></i> 修改密码</a>
						</li>
						<li><a href="{%:url('login/quit')%}"><i class="lnr lnr-exit"></i> <span>退出</span></a></li>
					</ul>
				</li>
				<!-- <li>
					<a class="update-pro" href="#downloads/klorofil-pro-bootstrap-admin-dashboard-template/?utm_source=klorofil&utm_medium=template&utm_campaign=KlorofilPro" title="Upgrade to Pro" target="_blank"><i class="fa fa-rocket"></i> <span>UPGRADE TO PRO</span></a>
				</li> -->
			</ul>
			<el-dialog
			title="消息"
			:visible.sync="dialogVisible"
			width="30%"
			append-to-body>
			<div>
				<el-tabs v-model="activeName" @tab-click="handleClick">
					<el-tab-pane label="未读消息" name="first"></el-tab-pane>
					<el-tab-pane label="已读消息" name="second"></el-tab-pane>
				</el-tabs>
			</div>
			<div >
				<el-table ref="multipleTable" :data="accountInfo.data.data" tooltip-effect="dark" style="width: 100%" border
					> 
					<el-table-column label="操作人" min-width="100" align="center">
						<template slot-scope="scope">
							<div >
								{{scope.row.account_id}}
							</div>
						</template>
					</el-table-column>
					<el-table-column label="消息" min-width="100">
						<template slot-scope="scope">
							<div >
								{{scope.row.type}}
							</div>
						</template>
					</el-table-column>
					<el-table-column label="内容" min-width="100">
						<template slot-scope="scope">
							<div >
								{{scope.row.remark}}
							</div>
						</template>
					</el-table-column>
					<el-table-column label="时间" min-width="120" align="center">
						<template slot-scope="scope">
							<div >
								{{scope.row.add_time}}
							</div>
						</template>
					</el-table-column>
					<el-table-column  label="操作" min-width="60">
						<template slot-scope="scope">
							<span  style="cursor: pointer;color: #7438D5;" @click="setComment(scope.row.id)">{{scope.row.is_comment==0?'标记':''}}</span>
						</template>
					</el-table-column>

		
				</el-table>
			</div>
			<div class="page-container display-flex">
				<el-pagination  @current-change="accountHandleCurrentChange"
					:current-page="accountCurrentPage"  :page-size="10" 
					layout="total,  prev, pager, next, jumper" :total="accountInfo.data.total">
				</el-pagination>
			</div>
			<span slot="footer" class="dialog-footer">
				<!-- <el-button @click="dialogVisible = false">取 消</el-button> -->
				<el-button type="primary" @click="setComment()">全部标记</el-button>
				<el-button type="primary" @click="dialogVisible = false">确 定</el-button>
			</span>
			</el-dialog>
		</div>
	</div>
</nav>
<link rel="stylesheet" href="__ROOT__/assets/addons/shopro/libs/element/element.css">
<link rel="stylesheet" href="__ROOT__/assets/addons/shopro/libs/common.css">
<script src="__STATIC__/assets/vendor/vue.js"></script>
<script src="__ROOT__/assets/addons/shopro/libs/element/element.js"></script>
<script src="__STATIC__/assets/vendor/jquery/jquery.min.js"></script>
<script>
	var vm = new Vue({
			el: '#navbar-menu',
			data: {
				dialogVisible: false,
				activeName: 'first',
				accountCurrentPage:1,
				accountInfo:{
					data:{
						total:0,
						data:[]
					},
					count:0
				},//队员信息
			},
			created: function(){
				this.getAccountList();
			},
			methods:{
				href(){
					sessionStorage.removeItem('keyPath')
					location.href = 'index.html';
				},
				handleClick(tab, event) {
					this.getAccountList();
				},
				// 获取消息列表
				getAccountList(){
					let that = this;
					$.get("{%:url('ProjectLog/getList')%}",{
					page:that.accountCurrentPage,
					is_comment:that.activeName
					},function(rsp){
						if(rsp.code == 1){
							that.accountInfo = rsp.data;
						}
					},'json')
					
				},
				// 切换分页
				accountHandleCurrentChange(val){
					this.accountCurrentPage = val;
					this.getAccountList();
				},
				setComment(id){
					let that = this;
					let data = {};
					if(id){
						data['id'] = id;
					}
					$.post("{%:url('ProjectLog/setComment')%}",data,function(rsp){
						if(rsp.code == 1){
							that.$message.success(rsp.msg);
							that.getAccountList();
						}else{
							that.$message.error(rsp.msg);
						}
					},'json')
				}
			}
	})
</script>